/*

CSS for wewrite plugin.


*/

.wewrite-ribbon-icon {
	color: rgb(8, 203, 138);
}

.wewrite-web-image {
	display: flex;
	justify-content: center;
	/* 水平居中 */
	align-items: center;
	/* 垂直居中 */
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	/* border-radius: 3px;
    border: solid 2px #ddd; */
}

.wewrite-web-image img {
	width: 100%;
	height: auto;
}

/* 凸起阴影效果的 CSS 类 */
.elevated-shadow {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	border-radius: 8px;
	/* 可选：添加圆角效果 */
	background-color: white;
	/* 可选：设置背景颜色 */
	transition: box-shadow 0.3s ease;
	/* 可选：添加过渡效果 */
}

/* 鼠标悬停时增加阴影效果 */
.elevated-shadow:hover {
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}


/********************************* 
left side view 
*********************************/
.wewrite-material-panel-container {
	/* border: 1px solid #ccc; */
	margin-bottom: 5px;
	vertical-align: middle;
}

.wewrite-material-panel-header {
	/* background-color: bisque; */
	padding: 5px;
	cursor: pointer;
	font-weight: bold;
	border: 1px solid #ccc;
	/* margin-right: 5px; */
	/* position: relative; */
}

.toggle-icon {
	float: right;
	background-color: transparent;
	border: none;
	cursor: pointer;
	transition: transform 1.8s ease;
}

.refresh-material-button {
	float: left;
	background-color: transparent;
	border: none;
	cursor: pointer;
	margin-left: 5px;
	margin-right: 10px;
	/* color: darkorange; */
}

.wewrite-material-panel-total {
	margin-left: 5px;
	margin-right: 5px;
	color: green;
}

.wewrite-material-panel-content {
	padding: 0.5em;
}

.wewrite-setting-frame,
.wewrite-account-info-div {
	padding: 1em;
	border: 2px solid #ccc;
	background-color: #fff;
	border-radius: 5px;
	margin-top: 0.5em;
	margin-bottom: 1em;
}

.wewrite-setting-frame .setting-item-control input {
	flex: 3;
}

.wewrite-setting-input {
	display: flex !important;
	flex-direction: row !important;
}

.wewrite-setting-input input {
	flex-grow: 1;
}

.wewrite-account-info-div .wewrite-account-info-title {
	position: absolute;
	top: -15px;
	/* 调整标题距离顶部的距离 */
	left: 20px;
	/* 调整标题距离左边的距离 */
	background-color: #fff;
	/* 背景色与容器背景色相同，以覆盖边框 */
	padding: 0 10px;
	/* 内边距 */
	font-weight: bold;
	color: #333;

}


.wewrite-account-info-div .wewrite-account-info-content {
	padding: 10px;
	font-size: 0.8em;
	font-weight: 500;
}

/* article header */
.wewrite-article-header {
	padding: 5px;
	border: 1px solid #ccc;
	/* background-color: bisque; papayawhip */
	border-radius: 6px;
	margin-bottom: 0.5em;
}

.wewrite-article-header details {
	margin: 5px;
}

.wewrite-article-header summary {
	font-weight: normal;
	cursor: pointer;
	outline: none;
	margin-left: 0px;

}

.wewrite-article-header summary::-webkit-details-marker {
	display: none;
}

.wewrite-article-header summary::before {
	content: "";
	font-weight: normal;
}

.wewrite-article-header details[open] summary::before {
	content: "";
}

.wewrite-article-header .cover-container {
	max-width: 500px;
	position: relative;
	width: 100%;
	/* 使容器宽度适应父元素 */
	overflow: hidden;
	/* 隐藏溢出的内容 */
	margin: auto;
}

.wewrite-article-header .cover-container::before {
	content: "";
	display: block;
	padding-top: 42.55%;
	/* 1 / 2.35 * 100%，计算得到的百分比 */
}

.wewrite-article-header .cover-frame {
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #f0f0f0;
	/* 示例背景颜色 */
}


.wewrite-article-header .cover-frame>* {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.wewrite-article-header .cover-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 使图片完全覆盖容器，保持宽高比 */
	aspect-ratio: 1 / 2.35;
	/* 设置图片的宽高比 */
}

.wewrite-article-header .cover-frame .image-on-dragover {
	border: 2px dashed red;
}

.wewrite-article-header .digest {
	width: 100%;
	/* 全宽 */
	height: auto;
	/* 自动高度 */
	min-height: 48px;
	/* 最小高度，3 行的高度 */
	max-height: 72px;
	/* 最大高度，3 行的高度 */
	resize: none;
	/* 禁止用户调整大小 */
	box-sizing: border-box;
	/* 包含边框和内边距 */
}

/* previewer */
.wewrite-previewer-container {
	display: flex;
	flex-direction: column;
	height: 88vh;
	/* 100% 视口高度 */
}

.wewrite-previewer-container .render-container {
	border: 1px solid #ccc;
	border-radius: 6px;
	background-color: #fff;
	padding: 5px;
	-webkit-user-select: text;
	user-select: text;

}

.wewrite-draft-header {
	font-size: 1.2rem;
	font-weight: bold;
	margin-left: 0.5em;
}

.wewrite-previewer-container .wewrite-article {
	margin: 0;
	padding: 0;
	border: 1px dashed lightgray;
}

.wewrite-previewer-container .article-div {
	border: none;
}



/* 
material view 
*/

.wewrite-material-view-tabs {
	width: 100%;
	/* margin-top: 1rem; */
}

.wewrite-material-view-tab-header {
	display: flex;
	/* border-bottom: 1px solid var(--background-modifier-border);
  margin-bottom: 0.5rem; */
	margin: 5px;
}

.wewrite-material-view-tab {
	background: transparent !important;
	/* Remove background */
	border: none !important;
	/* Remove border */
	box-shadow: none !important;
	/* Remove shadow */
	color: var(--text-normal);
	/* Use Obsidian's default text color */
	padding: 8px 12px;
	cursor: pointer;
	/* Add pointer cursor for better UX */
}

.wewrite-material-view-tab:hover {
	background: var(--background-modifier-hover);
	/* Add hover effect */
	color: var(--interactive-accent)
}

.wewrite-material-view-tab.active {
	background: var(--background-modifier-active);
	/* Add active effect */
}

.wewrite-material-view-tab-content {
	padding: 0;
}

.draft-news-item {
	margin-top: 0.5em;
	font-size: 0.8em;
}

/* confirm pulbish */
.confirm-pulbish-dialog {
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;

}

.confirm-pulbish-dialog-content {

	display: flex;
	padding: 10px;
	flex-direction: column;

}

.confirm-pulbish-dialog-content .description {
	border: gray 2px solid;
	padding: 1em;
	line-height: 1.8em;
	flex-grow: 1;
	text-align: center;
}

.confirm-pulbish-dialog-content .warning {
	color: red;
	font-weight: bold;
}


.confirm-pulbish-dialog-tool-bar {
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex: auto
		/* width: 100%; */
}

.confirm-pulbish-dialog-content button {
	margin-top: 2em;
	margin: 1em;
	background: transparent;
	border: none;
	cursor: pointer;
}

.danger-button {
	background-color: rgb(139, 22, 4) !important;
	color: azure !important;
}

.danger-extra-button {
	color: red;
}

.danger-extra-button .extra-setting-button {
	background-color: rgb(139, 22, 4) !important;
	color: azure !important;
}


/* image generation modal */

.image-generate-dialog-content {
	display: flex;
	padding: 10px;
	flex-direction: column;
}

.image-generate-dialog-size-bar {
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex: auto;
	vertical-align: middle;

}

.image-generate-dialog-size-bar input {
	flex-grow: 1;
	margin-left: 1em;

	/* margin-left: 1em; */
	padding: 0.5em 1em 0.5em;
	margin: 0;
	line-height: 1em;
	height: min-content;
}

.image-generate-dialog-tool-bar {
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex: auto
}

.image-generate-dialog-tool-bar button {
	margin-top: 2em;
	margin: 1em;
	background: transparent;
	border: none;
	cursor: pointer;
}

.image-generate-dialog-content textarea {
	border: gray 1px solid;
	border-radius: 5px;
	padding: 0.5em;
	line-height: 1.8em;
	flex-grow: 1;
	text-align: justify;
	margin-bottom: 5px;
	resize: none;
	text-wrap: pretty;
	overflow-y: auto;
	height: 6rem !important;
}

.image-generate-dialog-size-label {
	vertical-align: middle;
	margin-right: 1em;
	padding: auto;
}

.wewrite-list-frame {
	width: 100%;
	height: 100%;
	border: solid 1px #ccc;
	visibility: visible;
}

.wewrite-markdown-render-container {
	max-width: 720px;
}

.wewrite-markdown-render-container li {
	line-height: 3rem;

}

.wewrite-markdown-render-container ul,
ol {
	margin-top: 1rem;
	margin-bottom: 2rem;

}

.wewrite-markdown-render-container .callout {
	font-size: 20px;
	padding: 1rem;

}

/* styles.css */
.proof-suggestion-modal {
	position: fixed;
	z-index: 9999;
	background-color: var(--background-primary);
	border: 1px solid var(--background-modifier-border);
	border-radius: 4px;
	padding: 1em;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	resize: both;
	overflow: auto;
	min-width: 300px;
	min-height: 200px;
	max-width: 80vw;
	max-height: 80vh;
}

.proof-tooltip {
	position: fixed;
	background: white;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	z-index: 1000;
	max-width: 300px;
	pointer-events: auto;
}

.proof-underline {
	text-decoration: wavy underline #2196F3;
	cursor: pointer;
	position: relative;
	z-index: 1;
}

.proof-tooltip .proof-type {
	font-weight: bold;
	margin-bottom: 4px;
}

.proof-tooltip .proof-description {
	margin-bottom: 4px;
}

.proof-tooltip .proof-suggestion {
	margin-bottom: 8px;
	color: #2196F3;
}

.proof-tooltip .proof-actions {
	display: flex;
	gap: 8px;
}

.proof-tooltip button {
	padding: 4px 8px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

.proof-tooltip .proof-accept {
	background: #4CAF50;
	color: white;
}

.proof-tooltip .proof-reject {
	background: #f44336;
	color: white;
}

.synonyms-modal {
	max-height: 300px;
	overflow-y: auto;
}

.synonyms-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.synonym-item {
	padding: 8px 16px;
	cursor: pointer;
	transition: background-color 0.2s;
}

.synonym-item:hover {
	background-color: var(--background-modifier-hover);
}

.synonym-item.selected {
	background-color: var(--background-modifier-active);
}


.wewrite-material-panel-item {
	cursor: 'pointer';
}

.wewrite-webview-iframe {
	width: 100%;
	height: 100%;
	border: none;
}


/*
chat gpt 
proofreed
*/
.proofread-error {
	background-color: rgba(255, 0, 0, 0.3);
	cursor: pointer;
	border-bottom: 2px dashed red;
}

.proofread-menu {
	position: absolute;
	background: white;
	border: 1px solid #ccc;
	padding: 8px;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	z-index: 1000;
	font-size: 14px;
}

.proofread-menu:hover {
	display: block;
}

.proofread-menu .suggestion {
	display: block;
	margin-bottom: 6px;
	font-weight: bold;
}

.proofread-menu button {
	border: none;
	background: none;
	cursor: pointer;
	margin: 0 5px;
	font-size: 16px;
}

.proofread-menu button:hover {
	opacity: 0.7;
}

.wewrite-chat-playground {
	padding: 16px;

	.vertical-layout {
		display: flex;
		flex-direction: column;
		gap: 12px;
		height: 100%;
	}

	.param-item {
		display: flex;
		flex-direction: column;
		margin-bottom: 8px;

		label {
			font-weight: 500;
			margin-bottom: 4px;
		}

		select,
		textarea,
		input[type="range"] {
			background: var(--background-primary);
			color: var(--text-normal);
			border: 1px solid var(--background-modifier-border);
			border-radius: 4px;
			padding: 6px;
		}

		textarea {
			resize: vertical;
			min-height: 60px;
		}
	}

	.output-scroll-area {
		flex: 1;
		overflow-y: auto;
		border: 1px solid var(--background-modifier-border);
		padding: 12px;
		border-radius: 4px;
		background: var(--background-primary);

		.response-item {
			margin: 8px 0;
			padding: 8px;
			background: var(--background-secondary);
			border-radius: 4px;
		}
	}

	.button-container {
		display: flex;
		justify-content: flex-end;
	}
}


/** --------------- spinner ----------------- */


.spinner-container {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	justify-content: center;
	align-items: center;
	flex-direction: column;
	align-items: center;
}

.spinner-dots {
	position: relative;
	width: 120px;
	height: 120px;
	animation: spin 1.2s linear infinite;
}

.spinner-dot {
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	animation: pulse 1.2s ease-in-out infinite;
}

/* 多彩颜色（渐变感） */
.spinner-dot1 {
	background: #FF3CAC;
	top: 0;
	left: 52px;
	animation-delay: 0s;
}

.spinner-dot2 {
	background: #FF884B;
	top: 17px;
	left: 87px;
	animation-delay: 0.1s;
}

.spinner-dot3 {
	background: #FFD700;
	top: 52px;
	left: 104px;
	animation-delay: 0.2s;
}

.spinner-dot4 {
	background: #32CD32;
	top: 87px;
	left: 87px;
	animation-delay: 0.3s;
}

.spinner-dot5 {
	background: #00CFFF;
	top: 104px;
	left: 52px;
	animation-delay: 0.4s;
}

.spinner-dot6 {
	background: #6A5ACD;
	top: 87px;
	left: 17px;
	animation-delay: 0.5s;
}

.spinner-dot7 {
	background: #8A2BE2;
	top: 52px;
	left: 0px;
	animation-delay: 0.6s;
}

.spinner-dot8 {
	background: #FF69B4;
	top: 17px;
	left: 17px;
	animation-delay: 0.7s;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes pulse {

	0%,
	100% {
		transform: scale(0.85);
		opacity: 0.6;
	}

	50% {
		transform: scale(1.2);
		opacity: 1;
	}
}

.spinner-text {
  margin-top: -70px;
  font-size: 14px;
  color: green;
  text-align: center;
  animation: fadeInOut 2s ease-in-out infinite;
  padding: 10px;
  border-radius: 4px;
  /* background-color: white; */
}

@keyframes fadeInOut {
  0%, 100% {
    opacity: 0;
	background-color: transparent;
  }
  50% {
    opacity: 1;
	background-color: #ccc;
  }
}

/* 滚动条样式 we use shadow dom, make the preview looks better.*/
.wewrite-article::-webkit-scrollbar {
	width: 10px;
	height: 10px;
	background-color: var(--scrollbar-bg);
}

.wewrite-article::-webkit-scrollbar-thumb {
	background-color: var(--scrollbar-thumb-bg);
    -webkit-border-radius: var(--radius-l);
    background-clip: padding-box;
    border: 2px solid transparent;
    border-width: 3px 3px 3px 2px;
    min-height: 45px;
}
.wewrite-article::-webkit-scrollbar-thumb:hover {
	background-color: var(--scrollbar-thumb-hover-bg);
}
.wewrite-article::-webkit-scrollbar-corner{
	background: transparent;
}

.wewrite-render-preview {
	display:  none;
}
